<script lang="ts" setup>
import { reactive, toRefs, ref } from "vue" // vue
import { getqueryTeamName } from "@/api/SZ/SZXxfy" // 接口
import { getSZjhApi, getLableApi } from "@/api/SZ/SZLrtable" // 接口
import { FormInstance } from "element-plus" // elment
import { Search, Refresh } from "@element-plus/icons-vue" // 按钮图标
import { shortcuts, Y, M, D } from "@/utils/dateSet"
// 缓存
defineOptions({
  name: "SZLrtable"
})
const defaultTime1: [Date, Date] = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 0)]
const data = reactive<any>({
  searchData: {
    createTime: [
      new Date(Y.value, M.value, D.value, 0, 0, 0).getTime() - 3600 * 1000 * 24 * 1,
      new Date(Y.value, M.value, D.value, 23, 59, 59).getTime()
    ], // 创建时间
    shopName: "", // 店铺
    name: undefined //
  },
  formData: {},
  bqlr: 0,
  bqsr: 0,
  cb: 0,
  qmlr: 0,
  sqjz: 0,
  // 表单验证
  rules: {
    xxx: [{ required: true, trigger: "change", message: "请输入" }]
  }
})

const { searchData } = toRefs(data)
// #region
const loading = ref(false)
const tableData = ref<any>([]) //
const tableData2 = ref<any>([]) //
const tableData3 = ref<any>([]) //
const tablelist = async () => {
  loading.value = true
  if (!searchData.value.createTime) {
    searchData.value.createTime = []
  }
  //
  await getSZjhApi({
    ...searchData.value,
    startTime: new Date(searchData.value.createTime[0]).getTime() || "", // 时间
    endTime: new Date(searchData.value.createTime[1]).getTime() || "" // 时间
  })
    .then((res: any) => {
      tableData.value = res.data.table1
      tableData2.value = res.data.table2
      tableData3.value = res.data.table3
      data.bqlr = res.data.bqlr
      data.bqsr = res.data.bqsr
      data.cb = res.data.cb
      data.qmlr = res.data.qmlr
      data.sqjz = res.data.sqjz
      loading.value = false
    })
    .catch(() => {
      tableData.value = []
    })
}
// #endregion

// #region 搜索内容
const searchFormRef = ref<FormInstance | null>(null)
// 搜索
function handleSearch() {
  tablelist()
  console.log(searchData.value, "搜索")
}
// 重置
function resetSearch() {
  searchFormRef.value?.resetFields()
  handleSearch()
  data.bqlr = 0
  data.bqsr = 0
  data.cb = 0
  data.qmlr = 0
  data.sqjz = 0
}
// 订单来源根据部门查团队
const queryTeamName = ref()
const TeamName = async () => {
  await getqueryTeamName().then((res: any) => {
    queryTeamName.value = res.data
  })
}
TeamName()
// #endregion

// #region 查询人员
const queryName = ref()
const changeshopName = async (val: any) => {
  console.log(val)
  await getLableApi({
    shopName: val,
    startTime: new Date(searchData.value.createTime[0]).getTime() || "", // 时间
    endTime: new Date(searchData.value.createTime[1]).getTime() || "" // 时间
  }).then((res: any) => {
    queryName.value = res.data
  })
}
const changeshopNameTWo = async () => {
  await getLableApi({
    shopName: searchData.value.shopName,
    startTime: new Date(searchData.value.createTime[0]).getTime() || "", // 时间
    endTime: new Date(searchData.value.createTime[1]).getTime() || "" // 时间
  }).then((res: any) => {
    queryName.value = res.data
  })
}
// #endregion

// #region 改变某一列单元格背景颜色
function handleCellStyle({ columnIndex }: any) {
  // 判断目标列
  if (columnIndex <= 2 && columnIndex >= 0) {
    return {
      background: "#dff0d8"
    }
  }
  if (columnIndex <= 12 && columnIndex >= 3) {
    return {
      background: "#f2dede"
    }
  }

  if (columnIndex == 13) {
    return {
      background: "#fcf8e3"
    }
  }

  return {}
}
// #endregion

//
</script>

<template>
  <div class="app-container">
    <el-card>
      <el-row justify="center" align="middle">
        <el-col>
          <el-form ref="searchFormRef" :inline="true" :model="searchData">
            <el-form-item prop="createTime" label="时间">
              <el-date-picker
                @change="changeshopNameTWo"
                v-model="searchData.createTime"
                type="datetimerange"
                range-separator="到"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :shortcuts="shortcuts"
                :default-time="defaultTime1"
              />
            </el-form-item>
            <el-form-item prop="shopName" label="店铺">
              <el-select
                v-model.trim="searchData.shopName"
                clearable
                filterable
                placeholder="请选择订单来源"
                style="width: 240px"
                @change="changeshopName"
              >
                <el-option v-for="item in queryTeamName" :key="item.id" :label="item.name" :value="item.name" />
              </el-select>
            </el-form-item>
            <el-form-item prop="name" label="人员">
              <el-select
                v-model.trim="searchData.name"
                clearable
                filterable
                placeholder="请选择人员"
                style="width: 240px"
              >
                <el-option v-for="item in queryName" :key="item.id" :label="item.name" :value="item.name" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
              <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
    <div class="divcard">
      <el-card class="divcardTwo">
        <div>上期结转</div>
        <div>￥{{ data.sqjz }}</div>
      </el-card>
      <el-card class="divcardTwo">
        <div>本期收入</div>
        <div>￥{{ data.bqsr }}</div>
      </el-card>
      <el-card class="divcardTwo">
        <div>本期成本</div>
        <div>￥{{ data.cb }}</div>
      </el-card>
      <el-card class="divcardTwo">
        <div>本期利润</div>
        <div>￥{{ data.bqlr }}</div>
      </el-card>
      <el-card class="divcardTwo">
        <div>期末利润</div>
        <div>￥{{ data.qmlr }}</div>
      </el-card>
    </div>

    <el-card class="top">
      <el-table :data="tableData" v-loading="loading" border max-height="500" :cell-style="handleCellStyle">
        <el-table-column prop="dates" label="日期" align="center" />
        <el-table-column prop="ptsr" label="平台收入" align="center" />
        <el-table-column prop="tkje" label="退款金额" align="center" />
        <el-table-column prop="tgfy" label="推广费用" align="center" />
        <el-table-column prop="hdfy" label="活动费用" align="center" />
        <el-table-column prop="xxfy" label="线下费用" align="center" />
        <el-table-column prop="tsfk" label="投诉罚款" align="center" />
        <el-table-column prop="hfcz" label="话费充值" align="center" />
        <el-table-column prop="ljhf" label="链接话费" align="center" />
        <el-table-column prop="glfy" label="管理费用" align="center" />
        <el-table-column prop="hkje" label="号卡金额" align="center" />
        <el-table-column prop="hdbi" label="活动本金" align="center" />
        <el-table-column prop="hdbjde" label="活动大额" align="center" />
        <el-table-column prop="zszmyl" label="真实账面盈利" align="center" />
      </el-table>
    </el-card>

    <el-card class="top">
      <el-table :data="tableData2" v-loading="loading" border ref="tableRef" max-height="500">
        <el-table-column prop="shopName" label="店铺" align="center" />
        <el-table-column prop="dt" label="归属日期" align="center" />
        <el-table-column prop="typeFirst" label="收支类型" align="center" />
        <el-table-column prop="typeSecond" label="二级分类" align="center" />
        <el-table-column prop="details" label="明细" align="center" />
        <el-table-column prop="amount" label="金额" align="center" />
        <el-table-column prop="operationName" label="归属运营" align="center" />
      </el-table>
    </el-card>

    <el-card class="top">
      <el-table :data="tableData3" v-loading="loading" border max-height="350">
        <el-table-column prop="type_first" label="收支类型" align="center" />
        <el-table-column prop="type_second" label="二级分类" align="center" />
        <el-table-column prop="amount" label="金额" align="center" />
      </el-table>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.top {
  margin-top: 20px;
}
.mxbox {
  display: flex;
  justify-content: space-between;
}
.mxboxRight {
  margin-right: 10%;
}
.divcard {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  width: 50%;
}
.divcardTwo {
  width: 150px;
}
</style>
